Introduction to Creative Coding with p5.js
This presentation is part of an introduction into p5.js and Creative Coding for fellow students at FH Aachen in June 2026. The workshop was conducted in German and later translated into English.
Previous Experience
Who has done Creative Coding before?
What might have held you back?
What I’d like to show you
- Provide an overview of the field
- Why programming is fun
- What you / we can do with it
Creative Coding
-
Understanding technical programming as a creative practice
-
Embrace the Process - compared to using AI
-
Engaging with technologies
-
Using different programming languages and tools
-
Depending on what you want to do
Showcase
- WestBam - Monkey Say, Monkey Do Frühe Computergrafik
- Waldemar Cordeiro, A Mulher que não ê B.B., 1971 Das ZKM Archiv bietet noch mehr!
- Farbrausch - fr-025: the.popular.demo Demoszene
- Land Lines
- I made maps that show time instead of space
- Spacetime maps
- cablesCircleText
- Cables Patches - Top of the Month
- Zach Liebermann
- NIKE - Paint with your feet
- eCLOUD
- Evolving Logo by Michael Schmitz
- Genotyp 2 by Michael Schmitz
- Gradient Truchet
- Tidal Cycle first test
- Insomina - Node-based Music
- Pure Data algorithmic IDM
- DJ_Dave & Char Stiles Livecoding Performance @ Algowave Algorave
- Algorave at Iterations 2025
- Flor de Fuego - Live A/V
- Coding Trance Music from Scratch (Again )
- ...
Tools
Node-based Programming
Coding with code?!
Live coding
What is p5.js?
- Successor to Processing (Java)
- Still maintained by the Processing Foundation
- Now based on JavaScript
- Web-based, runs in the browser
- This makes it much more accessible
- Compatible with other JavaScript libraries (d3.js, ml5.js)
- p5.js Editor = Its own web-based development environment
- For larger projects, be sure to work in VS Code or similar
Exercise 1: The Editor and Basic p5.js Functions
Clean p5.js Editor but with SVG-Export:
A good place to start if you want vector graphics! Otherwise, SVG export isn't supported natively.
Clean SVG Editor
How is the editor structured, and how does p5.js work?
- Setup
- Draw
- Canvas
- File structure
- Shape using (mouseX and mouseY)
We create SVGs after sorting them and load them into the image raster
-
Coordinate system
-
Create shape
-
Colors
Exercise 2: More Complex Shapes
Create forms for the L-Tree
Use the prepared editor, change "Vorlage" images, and hide them for export
For some reason there are some gaps between SVGs in Firefox.
Exercise 3: Animation
Introduction into some p5.js functions that can be used for animating. See them in use in the example-sketch.
Loop Animation Example
I've put together a sketch that summarizes all the features shown today. You could experiment with different colors, shapes, or line thicknesses. I've also included some brief explanations.
https://editor.p5js.org/MaxRodenkirchen/sketches/UekJ1KBvX
Good learning resources for p5.js
Good learning resources include:
- https://p5js.org/reference/
The p5.js documentation — The website also features tutorials and examples - https://thecodingtrain.com/ A really funny guy—my go-to resource and a must-try!
- https://natureofcode.com/
- https://trcc.timrodenbroeker.de/ I’m not sure how much of it is free
- http://www.generative-gestaltung.de/
- https://stigmollerhansen.dk/resume/learning-creative-coding/ I haven’t read this one myself yet. The Book is available for free digitally!
Introduction to Creative Coding with p5.js
This presentation is part of an introduction into p5.js and Creative Coding for fellow students at FH Aachen in June 2026. The workshop was conducted in German and later translated into English.
Previous Experience
Who has done Creative Coding before?
What might have held you back?
What I’d like to show you
- Provide an overview of the field
- Why programming is fun
- What you / we can do with it
Creative Coding
-
Understanding technical programming as a creative practice
-
Embrace the Process - compared to using AI
-
Engaging with technologies
-
Using different programming languages and tools
-
Depending on what you want to do
Showcase
- WestBam - Monkey Say, Monkey Do Frühe Computergrafik
- Waldemar Cordeiro, A Mulher que não ê B.B., 1971 Das ZKM Archiv bietet noch mehr!
- Farbrausch - fr-025: the.popular.demo Demoszene
- Land Lines
- I made maps that show time instead of space
- Spacetime maps
- cablesCircleText
- Cables Patches - Top of the Month
- Zach Liebermann
- NIKE - Paint with your feet
- eCLOUD
- Evolving Logo by Michael Schmitz
- Genotyp 2 by Michael Schmitz
- Gradient Truchet
- Tidal Cycle first test
- Insomina - Node-based Music
- Pure Data algorithmic IDM
- DJ_Dave & Char Stiles Livecoding Performance @ Algowave Algorave
- Algorave at Iterations 2025
- Flor de Fuego - Live A/V
- Coding Trance Music from Scratch (Again )
- ...
Tools
Node-based Programming
Coding with code?!
Live coding
What is p5.js?
- Successor to Processing (Java)
- Still maintained by the Processing Foundation
- Now based on JavaScript
- Web-based, runs in the browser
- This makes it much more accessible
- Compatible with other JavaScript libraries (d3.js, ml5.js)
- p5.js Editor = Its own web-based development environment
- For larger projects, be sure to work in VS Code or similar
Exercise 1: The Editor and Basic p5.js Functions
Clean p5.js Editor but with SVG-Export:
A good place to start if you want vector graphics! Otherwise, SVG export isn't supported natively.
Clean SVG Editor
How is the editor structured, and how does p5.js work?
- Setup
- Draw
- Canvas
- File structure
- Shape using (mouseX and mouseY)
We create SVGs after sorting them and load them into the image raster
-
Coordinate system
-
Create shape
-
Colors
Exercise 2: More Complex Shapes
Create forms for the L-Tree
Use the prepared editor, change "Vorlage" images, and hide them for export
For some reason there are some gaps between SVGs in Firefox.
Exercise 3: Animation
Introduction into some p5.js functions that can be used for animating. See them in use in the example-sketch.
Loop Animation Example
I've put together a sketch that summarizes all the features shown today. You could experiment with different colors, shapes, or line thicknesses. I've also included some brief explanations.
https://editor.p5js.org/MaxRodenkirchen/sketches/UekJ1KBvX
Good learning resources for p5.js
Good learning resources include:
- https://p5js.org/reference/
The p5.js documentation — The website also features tutorials and examples - https://thecodingtrain.com/ A really funny guy—my go-to resource and a must-try!
- https://natureofcode.com/
- https://trcc.timrodenbroeker.de/ I’m not sure how much of it is free
- http://www.generative-gestaltung.de/
- https://stigmollerhansen.dk/resume/learning-creative-coding/ I haven’t read this one myself yet. The Book is available for free digitally!